<template>
 <div class="graphitizing">
   <div class="card-search cardTop">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="石墨化" name="graphContent"></el-tab-pane>
      <el-tab-pane label="生产计划" name="productionPlan"></el-tab-pane>
      <el-tab-pane label="报表导出" name="reportExport"></el-tab-pane>
      <el-tab-pane label="电价配置" name="electricityPrice"></el-tab-pane>
    </el-tabs>
   </div>
   <div class="card-table">
    <graphContent v-if="graphContentif" />
    <productionPlan v-if="productionPlanif" />
    <reportExport v-if="reportExportif" />
    <electricityPrice v-if="electricityPriceif" />
   </div>
 </div>
</template>

<script>
// import '@/mock/dataCenter.js'
import graphContent from './tabsGraphitize/graphContent.vue'
import productionPlan from './tabsGraphitize/productionPlan.vue'
import reportExport from './tabsGraphitize/reportExport.vue'
import electricityPrice from './tabsGraphitize/electricityPrice.vue'

export default {
  name: 'test',
  components: {
    graphContent,
    productionPlan,
    reportExport,
    electricityPrice
  },
  data () {
    return {
      activeName: 'graphContent',
      graphContentif: true,
      productionPlanif: false,
      reportExportif: false,
      electricityPriceif: false
    }
  },
  computed: {},
  created () {
    if (sessionStorage.getItem('activeTab')) {
      this.activeName = sessionStorage.getItem('activeTab')
      console.log('this', this.activeName)
      this.graphContentif = false
      this.productionPlanif = false
      this.reportExportif = false
      this.electricityPriceif = false
      switch (sessionStorage.getItem('activeTab')) {
        case 'graphContent':
          this.graphContentif = true
          break
        case 'productionPlan':
          this.productionPlanif = true
          break
        case 'reportExport':
          this.reportExportif = true
          break
        case 'electricityPrice':
          this.electricityPriceif = true
          break
        default:
          break
      }
    } else {
      sessionStorage.setItem('activeTab', this.activeName)
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.removeItem('activeTab')
    next()
  },
  mounted () {
  },
  methods: {
    handleClick (tab) {
      // console.log('tab', tab)
      sessionStorage.setItem('activeTab', tab.name)
      this.graphContentif = false
      this.productionPlanif = false
      this.reportExportif = false
      this.electricityPriceif = false
      switch (tab.index) {
        case '0':
          this.graphContentif = true
          break
        case '1':
          this.productionPlanif = true
          break
        case '2':
          this.reportExportif = true
          break
        case '3':
          this.electricityPriceif = true
          break
        default:
          break
      }
    }
  }
}
</script>

<style  scoped>
.block{
  margin-top: 20px;
  text-align: right;
}
 .el-pager .active{
  background-color: $primary !important;
}
.graphitizing {
  .cardTop {
    padding: 0 18px 0px;
  }
}
</style>
